<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { fetchScreenDetail } from '@/service/api';

defineOptions({
  name: 'ScreenPreviewModal'
});

interface Props {
  visible: boolean;
  screenId: number | null;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  screenId: null
});

interface Emits {
  (e: 'update:visible', visible: boolean): void;
}

const emit = defineEmits<Emits>();

const loading = ref(false);
const screenData = ref<Api.Dataplatform.Screen | null>(null);

function handleUpdateVisible(visible: boolean) {
  emit('update:visible', visible);
}

async function loadScreenData() {
  if (!props.screenId) return;

  loading.value = true;
  try {
    const { data } = await fetchScreenDetail(props.screenId);
    if (data) {
      screenData.value = data;
    }
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  loadScreenData();
});
</script>

<template>
  <NModal
    :show="visible"
    preset="card"
    :title="`大屏预览 - ${screenData?.name || ''}`"
    class="w-90vw h-90vh"
    :bordered="false"
    :segmented="{ content: true }"
    @update:show="handleUpdateVisible"
  >
    <NSpin :show="loading">
      <div class="h-full flex-col gap-16px">
        <NAlert type="info" closable>
          <template #header>预览说明</template>
          这是大屏预览界面。完整的预览功能需要根据组件配置渲染实际的图表和组件。
          <br />
          当前版本显示大屏的基本信息和配置内容。
        </NAlert>

        <div v-if="screenData" class="flex-1 flex-col gap-16px overflow-auto">
          <NDescriptions bordered :column="2">
            <NDescriptionsItem label="大屏名称">{{ screenData.name }}</NDescriptionsItem>
            <NDescriptionsItem label="大屏类型">{{ screenData.screenType }}</NDescriptionsItem>
            <NDescriptionsItem label="尺寸">{{ screenData.width }} × {{ screenData.height }}</NDescriptionsItem>
            <NDescriptionsItem label="刷新间隔">
              {{ screenData.refreshInterval > 0 ? `${screenData.refreshInterval}秒` : '不刷新' }}
            </NDescriptionsItem>
            <NDescriptionsItem label="状态">{{ screenData.status }}</NDescriptionsItem>
            <NDescriptionsItem label="预览URL">{{ screenData.previewUrl || '-' }}</NDescriptionsItem>
            <NDescriptionsItem label="发布URL">{{ screenData.publishUrl || '-' }}</NDescriptionsItem>
            <NDescriptionsItem label="描述" :span="2">{{ screenData.description || '-' }}</NDescriptionsItem>
          </NDescriptions>

          <div
            class="flex-1 border-2 border-dashed border-gray-300 rounded-8px p-16px"
            :style="{
              width: `${screenData.width}px`,
              height: `${screenData.height}px`,
              margin: '0 auto',
              transform: 'scale(0.8)',
              transformOrigin: 'top center'
            }"
          >
            <div class="h-full flex items-center justify-center text-gray-400">
              <div class="text-center">
                <icon-mdi-monitor-dashboard class="text-64px mb-16px" />
                <div class="text-16px">大屏预览区域</div>
                <div class="text-12px mt-8px">实际预览需要根据组件配置渲染图表</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </NSpin>

    <template #footer>
      <NSpace justify="end">
        <NButton @click="handleUpdateVisible(false)">关闭</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
